<template>
  <div>
<el-button type='primary' @click="addinfo" >添加</el-button>
<el-dialog title="请输入您的表单" :visible.sync="dialogFormVisible">
  <el-form :model="FormList">
    <el-form-item label="productsNum" :label-width="formLabelWidth">
      <el-input v-model="FormList.productsNum" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="productsDesc" :label-width="formLabelWidth">
      <el-input v-model="FormList.productsDesc" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="categoryId" :label-width="formLabelWidth">
      <el-input v-model="FormList.categoryId" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="bannerImg" :label-width="formLabelWidth">
      <el-input v-model="FormList.bannerImg" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="brand" :label-width="formLabelWidth">
      <el-input v-model="FormList.brand" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="content" :label-width="formLabelWidth">
      <el-input v-model="FormList.content" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="place" :label-width="formLabelWidth">
      <el-input v-model="FormList.place" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="storage" :label-width="formLabelWidth">
      <el-input v-model="FormList.storage" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="categoryTag" :label-width="formLabelWidth">
      <el-input v-model="FormList.categoryTag" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="productsName" :label-width="formLabelWidth">
      <el-input v-model="FormList.productsName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="price" :label-width="formLabelWidth">
      <el-input v-model="FormList.price" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="add">确 定</el-button>
  </div>
</el-dialog>

<el-table :data="list" stripe style="width: 100%;">
      <el-table-column align="center" prop="bannerImg" label="bannerImg">
      </el-table-column>
      <el-table-column align="center" prop="categoryId" label="categoryId">
      </el-table-column>
      <el-table-column align="center" prop="categoryTag" label="categoryTag">
      </el-table-column>
      <el-table-column align="center" prop="norms[0].brand" label="brand">
      </el-table-column>
      <el-table-column align="center" prop="norms[0].content" label="content">
      </el-table-column>
      <el-table-column align="center" prop="norms[0].place" label="place"> </el-table-column>
      <el-table-column align="center" prop="norms[0].storage" label="storage"> </el-table-column>
      <el-table-column align="center" prop="productsDesc" label="productsDesc">
      </el-table-column>
      <el-table-column align="center" prop="productsId" label="productsId"> </el-table-column>
      <el-table-column align="center" prop="productsNum" label="productsNum">
      </el-table-column>
      <el-table-column align="center" prop="productsNum" label="操作">
        <template slot-scope="scope">
          <el-button type='primary' @click="deleteById(scope.row.productsId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
 </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      dialogFormVisible: false,
      list: [
        {
          bannerImg: '',
          categoryId: '',
          categoryTag: '',
          norms: {
            brand: '',
            content: '',
            place: '',
            storage: ''
          },
          productsDesc: '',
          productsId: '',
          productsNum: '',
          productsName: '',
          price: ''
        }
      ],
      FormList: {
        productsNum: 0,
        productsDesc: '',
        productsId: '',
        bannerImg: '',
        brand: '',
        content: '',
        place: '',
        storage: '',
        categoryTag: '',
        productsName: '',
        price: 0
      },
      formLabelWidth: '120px'
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      var that = this
      axios
        .get('http://47.110.234.216:7001/get-pros', {
          params: { pageNum: 1, pageSize: 40 }
        })
        .then(function (res) {
          // console.log(res.data.datas);
          that.list = res.data.datas
          console.log(that.list)
        })
    },
    addinfo() {
      this.dialogFormVisible = true
    },
    add() {
      const that = this
      axios.post('http://47.110.234.216:7001/add-pros', {
        productsNum: this.FormList.productsNum,
        productsDesc: this.FormList.productsDesc,
        categoryId: this.FormList.categoryId,
        bannerImg: this.FormList.bannerImg,
        norms: { brand: this.FormList.brand, content: this.FormList.content, place: this.FormList.place, storage: this.FormList.storage },
        categoryTag: this.FormList.categoryTag,
        productsName: this.FormList.productsName,
        price: this.FormList.price
      }).then(function(res) {
        that.getInfo()
        console.log(res)
        if (res.data.status) {
          that.$message({
            type: 'success',
            message: '添加成功！'
          })
          that.dialogFormVisible = false
        }
      })
    },
    deleteById(productsId) {
      const that = this
      axios.delete('http://47.110.234.216:7001/delete-pros', {
        // eslint-disable-next-line no-undef
        data: { productsId: productsId }
      }).then(function(res) {
        that.getInfo()
        that.$message({
          type: 'success',
          message: '删除成功！'
        })
      })
    }
  }
}
</script>
